<template>
  <div class="zuicoolToast" v-show="visible">
    {{content}}
  </div>
</template>

<script>
  export default {
    name: "zuicool-toast",

    props: {
      content: {
        type: String,
        default: ''
      },
    },

    data() {
      return {
        visible: false,
      }
    }
  }
</script>

<style lang='less' scoped>
  .zuicoolToast {
    position: fixed;
    left: 50%;
    top: 50%;

    border-radius: 5px;
    padding: 5px 10px;
    max-width: 80%;

    font-size: 16px;
    line-height: 1;

    color: #fff;
    background-color: rgba(17, 17, 17, .7);

    transform: translateX(-50%) translateY(-50%);
  }
</style>
